<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transaction History - NeonBank</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="{{ url_for('index') }}"><i class="fas fa-bank me-2"></i>NeonBank</a>
        </div>
    </nav>
    <div class="container mt-5">
        <!-- Debug information -->
        <div class="alert alert-info" role="alert">
            DEBUG: Rendering history page for Account ID {{ account_id }} {% if account_name %} ({{ account_name }}) {% endif %}
        </div>

        <!-- Flash messages -->
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ 'success' if category == 'success' else 'danger' if category == 'danger' else 'info' }} alert-dismissible fade show" role="alert">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}

        <!-- Error message -->
        {% if error %}
            <div class="alert alert-danger" role="alert">
                Error: {{ error }}
            </div>
        {% endif %}

        <h1 class="text-center mb-4">
            <i class="fas fa-history me-2"></i>Transaction History for Account ID {{ account_id }}
            {% if account_name %} ({{ account_name }}) {% endif %}
        </h1>

        <div class="card p-4">
            <a href="{{ url_for('index') }}" class="btn btn-primary mb-3"><i class="fas fa-arrow-left me-2"></i>Back to Dashboard</a>
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>From Account</th>
                        <th>To Account</th>
                        <th>Amount</th>
                        <th>Date</th>
                    </tr>
                </thead>
                <tbody>
                    {% for tx in transactions %}
                    <tr>
                        <td>{{ tx[0] }}</td>
                        <td>{{ tx[1] if tx[1] else 'N/A' }}</td>
                        <td>{{ tx[2] if tx[2] else 'N/A' }}</td>
                        <td>${{ "%.2f" | format(tx[3] | float) }}</td>
                        <td>{{ tx[4] | string }}</td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="5" class="text-center">No transactions found for this account.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            <!-- Placeholder for pagination -->
            <nav aria-label="Page navigation">
                <ul class="pagination justify-content-center">
                    <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item disabled"><a class="page-link" href="#">Next</a></li>
                </ul>
            </nav>
        </div>
    </div>
    <footer class="footer mt-5">
        <p>&copy; 2025 NeonBank. All transactions are secure and encrypted. For help, contact support@govbank.example.</p>
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>